<template>
  <div>
    <div v-if="activityView.hasAuth === true">
      <el-timeline>
        <el-timeline-item
          v-for="(record, index) in browseRecordList"
          :key="index"
          icon="el-icon-more"
          type="primary"
          size="large"
          :timestamp="record.createTimeStr">
          学习了&nbsp;&nbsp;{{record.activityContentView.contentName}}
        </el-timeline-item>
      </el-timeline>
      <!--请求标识-->
      <div v-if="loadingFlag=== true" style="text-align: center;font-size: larger;margin-top: 10px;">
        <i  class="el-icon-loading"></i>
      </div>
      <div v-else-if="indexPage.hasMore === true" style="text-align: center;font-size: small;color: #99a9bf;margin-top: 10px;" @click="loadingMore()">
        <span>--点击加载更多--</span>
      </div>
      <div v-else-if="browseRecordList.length > 0" style="text-align: center;font-size: small;color: #99a9bf;margin-top: 10px;">
        <span>--没有更多数据了--</span>
      </div>
      <div v-else style="text-align: center;font-size: small;color: #99a9bf;margin-top: 10px;">
        <span>--暂无数据--</span>
      </div>
    </div>

    <div v-else>
      <div style="text-align: center;font-size: small;color: #99a9bf;margin-top: 10px;">
        <span>--请先报名--</span>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "StudyRecord",
  props: ['activityId'],
  data() {
    return {
      indexPage: this.$global.indexPage,
      paramsData: {
        activityId: '',
        contentLevel: '',
        contentType: ''
      },
      activityView: {
        creator: '',
        activityName: '',
        activityType: '',
        activityLogo: '',
        activityDesc: '',
        teacherAvatarUrl: this.$global.avatarDefault,
        createTimeStr: '',
        authNum: '',
        hasAbility: false,
        hasAuth: false,
        hasActivityPower: false
      },
      browseRecordList:[],
      loadingFlag: false,
    }
  },
  mounted() {
    addEventListener('scroll', this.handleScroll)//监听函数
  },
  methods: {
    handleScroll() {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      //变量windowHeight是可视区的高度
      let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
      //滚动条到底部的条件
      if (scrollTop + windowHeight === scrollHeight) {
        //你想做的事情
        if (this.indexPage.hasMore === true && !this.loadingFlag) {
          this.indexPage.page += 1;
          this.getBrowseRecord();
        }
      }
    },
    loadingMore:function () {
      this.indexPage.page += 1;
      this.getBrowseRecord();
    },
    /**
     *获取查看课件记录
     *
     */
    getBrowseRecord: function () {
      this.loadingFlag = true
      this.paramsData.activityId = this.activityId
      this.paramsData.page = this.indexPage
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/activity/content/browse/record/getBrowseRecord',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.loadingFlag = false
          this.browseRecordList = this.browseRecordList.concat(responseData.pageData.data)
          this.indexPage = responseData.pageData.page
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
    /**
     *
     * 班级详情
     * */
    detail: function () {
      this.paramsData.activityId = this.activityId
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/activity/detail',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.activityView = responseData.activityView
          if (this.activityView.hasAuth === true) {
            this.getBrowseRecord()
          }
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
  },
  created() {
    this.detail()
  }
}
</script>

<style scoped>

</style>
